<template>
	<view class="app">
		<!-- 图片模糊 -->
		<view class="bg-dim">
			<!-- <image src="" mode=""></image> -->
		</view>
		<view class="transt-top">
		<!-- 头像信息 -->
		<view class="user-info">
			<view class="top-img">
				<!-- <image src="../../admin/images/member2.png" mode=""></image> -->
			</view>
				<!-- 内容 -->
					<view class="top-conten">
						<view class="top-card">
							<view class="title">
								张三
							</view>
							<!-- 人数 -->
							<view class="map bgTheme">
								联系TA
							</view>
						</view>
						<!-- 介绍 -->
						<view class="include">
							<text>深圳</text>
							<text class="jg">|</text>
							<text>70后</text>
							<text class="jg">|</text>
							<text>创业者</text>
						</view>
					</view>
				</view>
				<view class="detail-info-card">
					<view class="detail-list">
						<view class="list">
							<view class="list-left">
								手机号
							</view>
							<view class="list-right">
								131***********
							</view>
						</view>
						<view class="list">
							<view class="list-left">
								微信
							</view>
							<view class="list-right">
								131***********
							</view>
						</view>
						<view class="list">
							<view class="list-left">
								能提供资源
							</view>
							<view class="list-right-type">
								<view class="list-type colorTheme" v-for="(item,index) in 2">
									医院人脉
								</view>
							</view>
						</view>
						<view class="list">
							<view class="list-left">
								地区
							</view>
							<view class="list-right">
								广东省-广州市
							</view>
						</view>
						<view class="list flex-wrap">
							<view class="list-left">
								主要业务与优势
							</view>
							<view class="list-right">
								广东省广州市主要业务与优势主要业务与优势主要业务与优势主要业务与优势主要业务与优势主要业务与优势
							</view>
						</view>
						<view class="list flex-wrap">
							<view class="list-left">
								图片介绍
							</view>
							<view class="list-right flex-wrap">
								<view class="list-img" v-for="(item,index) in 4">
									<image src="" mode=""></image>
								</view>
							</view>
						</view>
						<view class="list flex-wrap clrea-show">
							<view class="list-left">
								想结识的资源
							</view>
							<view class="list-right">
								想结识的资源主要业务要业务与优势
							</view>
						</view>
					</view>
				</view>
			</view>
			
		
		<view class="send-btn">
			我想认识
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:[
					{
						name:"全部",
						value:0
					},
					{
					name:"资源",
					value:1
				},
				{
					name:"需求",
					value:2
				}],
				type_index:0
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="less">
	.bg-dim{
		width: 100%;
		height: 400rpx;
		background-color: #00A0E9;
	}
	.transt-top{
		position: relative;
		top: -40rpx;
		transform: translateY(-40rpx);
		margin-bottom: 180rpx;
	}
	.user-info{
		width: 95%;
		background-color: #FFFFFF;
		position: relative;
		height: 150rpx;
		padding: 15rpx;
		border-radius: 15rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: space-between;
		align-items: center;
		.top-img{
			background-color: #007AFF;
			height: 110rpx;
			width: 17%;
			border-radius: 100%;
			image{
				width: 100%;
				height: 100%;
				border-radius: 100%;
			}
		}
		.top-conten{
			width: 79%;
			height: 110rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.top-card{
				display: flex;
				justify-content: space-between;
				.title{
					font-size: 35rpx;
					font-weight: initial;
				}
			}
			.include{
				text{
					// margin-right: 2%;
					font-size: 24rpx;
					color: #838384;
				}
				.jg{
					margin: 0 1.5%;
				}
				.more{
					color: #994275;
				}
				
			}
			.map{
				width: 150rpx;
				height: 45rpx;
				font-size: 25rpx;
				border-radius: 60rpx;
				// background-color: #994275;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;

			}
		}
	}
	.detail-info-card{
		width: 95%;
		min-height: 0;
		padding: 10rpx;
		background-color: #FFFFFF;
		margin: 2% auto;
		border-radius: 15rpx;
		.detail-list{
			width: 100%;
			padding-left:18rpx;
			.list{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;
				box-shadow: 0  1rpx #d3d3d3;
				.list-left{
					color: #717171;
				}
				.list-right{
					color: #000000;
					font-weight: 600;
				}
				.list-right-type{
					width: 60%;
					display: flex;
					flex-wrap: wrap;
					// justify-content:space-around;
					.list-type{
						width: 45%;
						margin: 1% 2.5%;
						height: 60rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #f9d7d9;
						font-weight: 600;
						border-radius: 30rpx;
					}
				}
			}
			.flex-wrap{
				display: flex;
				flex-wrap: wrap;
				.list-right{
					width: 100%;
					margin: 2% 0;
					.list-img{
						width: 30%;
						margin: 1.5% 0 0 3.3%;
						height: 200rpx;
						background-color: #007AFF;
						border-radius: 15rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			.clrea-show{
				box-shadow: 0 0 0 #000000;
			}
		}
	}
 .send-btn{
	 position: fixed;
	 bottom: 3%;
	 width: 95%;
	 height: 80rpx;
	 color: #FFFFFF;
	 background-color: #994275;
	 border-radius: 80rpx;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 // font-size: 1rem;
	 left: 50%;
	 transform: translateX(-50%);
 }
</style>
